import React, { Component } from "react";
import  PropTypes from 'prop-types'



class List extends Component {
    constructor(props) {
        super(props)
        this.handleClick = this.handleClick.bind(this)
    }

   componentWillReceiveProps() {
       console.log('子组件 -- willRecieve');
   }

   shouldComponentUpdate(nextProps, nextState) {
    if(nextProps.content !== this.props.content) {
        return true
    }   
    else {
    return false
    }
   }

   componentWillUnmount() {
       console.log('子组件 --- 将要卸载');
   }

    render() {
        console.log('render');
        return (
            <div onClick={this.handleClick}>
                {this.props.content} - {this.props.name}
            </div>
        )
    }

    handleClick() {
    console.log(this.props.index);
    this.props.deleteItem(this.props.index)
    }
}

List.propTypes = { // 校验
    content: PropTypes.string,
    deleteItem: PropTypes.func,
    index:PropTypes.number,
    name: PropTypes.string.isRequired
}
List.defaultProps = {
    name: '蜗牛'
}
export default List